<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日历</title>
</head>
<body>
    <div id="app" >
        <div class="detail">
            <div class="event-box">
                11:00 | 理发
            </div>
            <div class="event-box">
                13:36 | 看病
            </div>
        </div>
        <div class="week" style="top: 5%">
            <div style="width: 80vw; font-size:6vw;font-weight: 200;">四 月 是 你 的 谎 言</div>
        </div>
        <div class="week">
            <div>日</div>
            <div>一</div>
            <div>二</div>
            <div>三</div>
            <div>四</div>
            <div>五</div>
            <div>六</div>
        </div>
        <div class="container" >
            <div class="item-row">
                <div class="items" style="color:rgb(219, 214, 214)">
                    28
                </div>
                <div class="items" style="color:rgb(219, 214, 214)">29</div>
                <div class="items" style="color:rgb(219, 214, 214)">30</div>
                <div class="items" style="color:rgb(219, 214, 214)">31</div>
                <div class="items">1</div>
                <div class="items">2</div>
                <div class="items">3</div>
            </div>
            <div class="item-row">
                <div class="items">4</div>
                <div class="items">5</div>
                <div class="items">6</div>
                <div class="items">7</div>
                <div class="items">8</div>
                <div class="items">9</div>
                <div class="items">10</div>
            </div>
            <div class="item-row">
                <div class="items">11</div>
                <div class="items">12</div>
                <div class="items">13</div>
                <div class="items">14</div>
                <div class="items">15</div>
                <div class="items">16</div>
                <div class="items">17</div>
            </div>
            <div class="item-row">
                <div class="items">18</div>
                <div class="items">19</div>
                <div class="items">20</div>
                <div class="items">21</div>
                <div class="items">22</div>
                <div class="items" onclick="showDetail()" style="color:red">23</div>
                <div class="items">24</div>
            </div>
            <div class="item-row">
                <div class="items">25</div>
                <div class="items">26</div>
                <div class="items">27</div>
                <div class="items">28</div>
                <div class="items">29</div>
                <div class="items">30</div>
                <div class="items" style="color:rgb(219, 214, 214)">1</div>
            </div>
        </div>
    </div>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color:#eee;
        }
        #app{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            position: relative;
        }
        .container{
            width: 90vw;
            height: 50%;
            display:flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            box-shadow: -8px -8px 16px -10px rgba(255, 255, 255, 1), 8px
                8px 16px -10px rgba(0, 0, 0, .3);

            border-radius: 20px;

            transition: all 2s;
        }
        .item-row{
            width: 90vw;
            height: 13vw;
            

            display: flex;
            justify-content:space-around;
        }
        .items{
            width: 11vw;
            height: 11vw;
            border-radius: 50%;
            color: #999;
            background: linear-gradient(135deg, rgba(230, 230, 230, 1) 0%,
                        rgba(246, 246, 246, 1) 100%);
            box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1), 
                        4px 4px 10px -8px rgba(0, 0, 0, .3);
            
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .items:hover {
            box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1) inset, 
                        4px 4px 10px -8px rgba(0, 0, 0, .3) inset;
        }

        .detail{
            position: absolute;
            z-index: 10;
            width: 80vw;
            height: 40%;
            background-color: #eee;
            border-radius: 20px;
            box-shadow: -8px -8px 16px -10px rgba(255, 255, 255, 1), 8px
                8px 16px -10px rgba(0, 0, 0, .3);
            opacity: 0;
            display: none;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            transition: opacity 2s;
        }
        .event-box{
            width: 80%;
            height: 20%;
            background: linear-gradient(135deg, rgba(230, 230, 230, 1) 0%,
                        rgba(246, 246, 246, 1) 100%);
            box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1), 
                        4px 4px 10px -8px rgba(0, 0, 0, .3);
            border-radius: 30px;
            color: #999;
            font-size: larger;

            display: flex;
            justify-content: center;
            align-items: center;
        }
        .week{
            position: absolute;
            top: 15%;
            width: 90vw;
            height: 10%;
            /* background-color: beige; */

            display: flex;
            justify-content: center;
            transition: all 2s;
        }
        .week div{
            width: 20vw;
            height: 100%;
            /* background-color: blue; */
            color: #666;
            font-size: large;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
    <script>
        let detail = document.getElementsByClassName("detail")
        let container = document.getElementsByClassName("container");
        let app = document.getElementById("app")
        let week = document.getElementsByClassName("week")
        function showDetail() {
            container[0].style.filter = 'blur(2px)'
            week[0].style.filter = 'blur(2px)'
            week[1].style.filter = 'blur(2px)'
            detail[0].style.display = 'flex'
            event.stopPropagation()
            setTimeout(()=>detail[0].style.opacity = 1 ,100)
            app.addEventListener("click",show)
        }
        function foo() {
            container[0].style.filter = 'blur(0)';
            week[0].style.filter = 'blur(0)'
        }
        detail[0].addEventListener("click",stop)
        function stop() {
            event.stopPropagation()
        }

        
        function show() {
            detail[0].style.opacity = 0;
            setTimeout(()=>{
               detail[0].style.display = 'none'
            container[0].style.filter = 'blur(0)' 
            week[0].style.filter = 'blur(0)'
            week[1].style.filter = 'blur(0)'
            },1000)
            
        }
    </script>
</body>
</html>